<template>
  <div>
    <van-nav-bar
    class="tou"
    title="客服小黑"
    :fixed=true
    left-arrow
     @click-left="onClickLeft"
    >
    </van-nav-bar>
    <div class="main">
      <p>您好</p>
      <p>客服小黑为您服务</p>
      <ul>
          <li v-for="item in message_array">{{item}}</li>
      </ul>
    </div>
    <div class="footer">
        <van-cell-group>
          <van-field
            v-model="value"
            center
            clearable
            placeholder="输入消息..."
          >
            <van-button v-tap="{methods:btn}" slot="button" size="small" type="primary">发送</van-button>
          </van-field>
        </van-cell-group>
    </div>
  </div>
</template>

<script>
  export default{
    name:'Service',
    data(){
      return{
        value:'',
        message_array:[],
      }
    },
    methods:{
      onClickLeft(){
        this.$router.go(-1)
      },
      btn(){
        this.message_array.push(this.value);
        this.value = '';
      },
    }
  }
</script>

<style scoped="">
  .van-hairline--bottom{
    border-bottom:1px solid #e2e2e2 ;
  }
  .van-icon-arrow-left{
    color: #bfbfbf;
    font-size: 24px;
  }
  .van-nav-bar__title{
    font-size: 20px;
  }
  .footer{
    padding: 0 20px;
  }
  .van-cell--center{
    border-radius: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .main{
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
  }
  .main p{
    max-width: 110px;
    padding: 4px 2px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #DDDDDD;
  }
  ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  li{
    list-style: none;
    max-width: 140px;
    padding: 4px 2px;
    border-radius: 4px;
    background:#42B983;
    margin-left: 240px;
    margin-bottom: 10px;
  }
</style>
